<template>
    <div>
        <div class="search">
            <input type="text" v-model="keyword" placeholder="输入城市名或拼音">
        </div>
        <div class="wrapper1" ref="wrapper1" v-show="keyword">
            <div class="search_content">
                <ul>
                    <li class="border-bottom" v-for="(item,index) in Clist" :key="index" @click="changeCity(item)">{{item}}</li>
                    <li class="border-bottom" v-show="Clist.length==0">没有找到数据</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped>
.wrapper1{
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 95;
    top: 1.74rem;
    left: 0;
    bottom: 0;
    background-color: #d1d1d1;
}
.search{
    background-color: #03b4d0;
    padding: .2rem;
}

.search input{
    width: 100%;
    text-align: center;
    border-radius: .1rem;
    padding: .1rem 0;
    color: #666;
}

.search_content li{
    box-sizing: border-box;
    padding: .2rem;
    background-color: white;
}
</style>

<script>
import BScroll from 'better-scroll'
export default {
    props:['list'],
    data(){
        return{
            title:"搜索框",
            keyword:"",
            Clist:[],
        }
    },
    watch:{
        keyword(){
            var that=this;
            if(this.keyword){
                const arr=[];
                for(let item in this.list){
                    this.list[item].forEach((val) => {
                        if(val.name.indexOf(that.keyword)>-1 || val.spell.indexOf(that.keyword)>-1){
                            arr.push(val.name);
                        }
                    });
                }
               this.Clist=arr;
               return
            }
        }
    },
    methods:{
        changeCity(city){
            this.$store.commit("change",city);
            this.$router.push("/");
        }
    },
    mounted(){
        // let wrapper = document.querySelector('.wrapper')
        this.scroll = new BScroll(this.$refs.wrapper1);
    }
}
</script>
